<template>
    <a href="javascript:;"  class="adItem" @click="goTodetail" v-if="show">
        <h4 class="title">
            {{data.title}}
        </h4>
        <img class="cover" v-lazy="data.src_text" :alt="data.title">
        <div class="info">
           <div class="dec">
                <span class="admark">广告</span>
                <span class="com one-ellipsis">{{data.desc_text}}</span>
                <span class="time">{{ data.createtime * 1000 | dateformat('YYYY-MM-DD HH:mm')}}</span>
           </div>
           <!-- <i class="close" @click="close">×</i> -->
        </div>
    </a>
</template>


<style lang="scss">
    .adItem{
        width: 100%;
        background: #FFF;
        padding: 0 30px;
        margin-bottom: 50px;
        display: flex;
        flex-direction: column;
        display: block;
        text-decoration: unset;
        .title{
            color:rgba(2,2,2,1);
            font-weight:400;
            line-height:50px;
            margin: 0;
            padding: 0;
            max-height: 90px;
            font-size:34px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }
        .cover{
            width: 694px;
            height: 390px;
            object-fit: cover;
            border-radius: 4px;
            background: #999;
            margin-top: 15px;
            overflow: hidden;
            font-size: 0;
        }
        .info{
            height: 47px;
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            .dec{
                display: flex;
                .admark{
                    height: 24px;
                    border-radius: 2px;
                    border: 2px solid rgba(169,171,169,1);
                    font-size: 20px;
                    line-height: 24px;
                    padding: 0 4px;
                    color: rgba(169,171,169,1);
                }
                .com,.time{
                    height:21px;
                    font-size:20px;
                    font-weight:bold;
                    color:rgba(169,171,169,1);
                    line-height: 24px;
                    margin-left: 18px;
                }
                .com{
                    max-width: 400px;
                }
            }
            .close{
                height: 24px;
                width: 28px;
                border-radius: 6px;
                border: 2px solid rgba(169,171,169,1);
                color: rgba(169,171,169,1);
                font-size: 20px;
                font-style: normal;
                line-height: 24px;
                text-align: center;
            }
        }
    }
</style>

<script>
import Vue from "vue";
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
export default {
    name: "adItem",
    props:{
        data:{
            type: Object,
            value: () => {
                return {}
            },
        }
    },
    data(){
        return {
            show: true
        }
    },
    methods:{
        goTodetail(){
            let url = this.data.linkurl || this.data.url
            if(url && url!="#"){
                window.open(url)
            }
        },
        close(){
            this.show = false
        }
    }
}
</script>